<template>
  <div class="createPage">
    <!-- 顶部按钮 -->
    <div class="topBtn">
      <!-- <div class="reback">
        <el-button type="primary" size="mini" round @click="rebackBtn">返回</el-button>
      </div> -->
      <div class="save">
        <el-button type="primary" size="mini" round @click="saveData">保存</el-button>
      </div>
    </div>
    <!-- 操作区域 -->
    <div class="template">
      <!-- 左边 -->
      <div class="left">
        <el-tabs v-model="modelsName">
          <el-tab-pane label="模板列表" name="first">
            <draggable class="widgetList" v-model="modelList" :options="optionsLeft" :clone="cloneDog">
              <div class="modelItem" v-for="(item,index) in modelList" :key="'m'+index">
                <div class="itemBox">
                  <img :src="require('@/assets/icon/'+item.icon)"/>
                  <div class="name">{{item.label}}</div>
                </div>
              </div>
              <div v-if="modelList.length<=0" class="noModelList">暂无可用模板</div>
            </draggable>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 中间 -->
      <div class="center">
        <!-- 页面信息 --> 
        <div class="navInfo pointer" @click="isShowInfo">
          <span class="title">{{detailInfo.detailName}}</span>
        </div>
        <!-- 楼层列表 -->
        <div class="panle" :style="bgImg!==''?{background:'url('+bgImg+')',backgroundSize:'cover',backgroundPosition:'center center'}:''"
          @click="defaultNull">
          <Draggable class="view" :options="optionsRight" :list="waterfallList">
            <!-- 楼层 -->
            <div class="item" v-for="(items,index) in waterfallList" :data-idx="index" :key="index"
              :class="{'border':modelClass=='a'+index}" 
              @click.stop="selectType(items,'a'+index)">
              <!-- 模板 -->
              <div :style="{ padding: `10px`,
                width:`${items.style.w<10?10:parseInt(items.style.w/4*3)}px`,
                height:`${items.style.h<10?10:parseInt(items.style.h/4*3)}px`
                }">
                <WidgetsListAll :com="items.com" :widgetData="items" :comClass="comClass"
                  @detailRecomm="getDetailRecomm(arguments,items)" @deleteRecommItem="deleteRecommItem(arguments,items)">
                </WidgetsListAll>
              </div>
              <!-- delete -->
              <i @click.stop="deleteFloorItem(items,index)" class="el-icon-error"></i>
            </div>
          </Draggable>
        </div>
      </div>
      <!-- 右边 -->
      <div class="right">
        <!-- 详情信息 -->
        <DetailInfo v-if="isDetailInfo" :modelData="detailInfo" @toImage="initScreenShort"></DetailInfo>
        <!-- 楼层信息 -->
        <WidgetAttrList v-if="isFloorInfo" :comData="propsData"
          :disabledType="disabledType"
          @AddItem="AddItem" @AddItemPoster="AddItemPoster">
        </WidgetAttrList>
        <!-- 其他配置信息 -->
        <el-tabs v-if="isRight" v-model="activeName2">
          <el-tab-pane label="位置信息配置" name="first">
            <PositionInfo ref="basic" :siteId="siteId" :positionInfo="positionInfo" :disabledType="disabledType"> </PositionInfo>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
// 插件
import Draggable from "vuedraggable";
// 组件
import WidgetsListAll from '@/components/singlePage/model/widgetsListAll2.vue'; //组件列表
import WidgetAttrList from '@/components/singlePage/model/widgetAttrList2.vue'; //组件属性列表
// 组件属性
import DetailInfo from '@/components/singlePage/modelCommon/detailInfo.vue'; //模板信息
import PositionInfo from '@/components/singlePage/modelCommon/positionInfo.vue'; //位置信息配置
import {DETAIL_LIST_WIDGET} from '@/commont/constants/otherConfig.js'; // 静态配置
// 随机数id
import {toHex,randNum4} from '@/commont/constants/unionCode.js';
let idx = 1;//焦点位置排序
let imgURL = require('@/assets/img/r-1.jpg');
export default {
  components: {Draggable,WidgetsListAll,WidgetAttrList,DetailInfo,PositionInfo,},
  props: {},
  data () {
    return {
      /************ 左边模板列表 ************/ 
      modelsName: "first",
      modelList: DETAIL_LIST_WIDGET,
      /************ 中间操作面板 ************/
      bgImg: require('../../assets/modelBg.png'),//背景图
      detailInfo: {//详情页列表信息
        detailName:'',
        modelType:'',
        modelBuss:'',
        modelPosi:2,
        modelSign:'',
        modelSignAdd:'',
        viewImg:'',
        modelDetails:''
      },
      waterfallList: [],//详情页列表
      modelClass: null,//点击模板时的样式
      comClass: null,//点击组件时的样式
      /************ 右边模板属性 ************/
      isDetailInfo: true,
      isFloorInfo: false,
      isMorebtn: false,
      isRight: false,
      activeName2: "first",
      positionInfo: {},//位置信息
      siteId:'',//位置id
      disabledType: false, //显示类型
      
    }
  },
  computed: {
    optionsLeft(){
      return {
        animation: 150,
        group: {
          name: "shared",
          pull: 'clone',
          put: false
        },
        sort: false,
      }
    },
    optionsRight(){
      return {
        animation: 150,
        group: 'shared',
      }
    }
  },
  watch: {},
  created () {},
  mounted () {},
  updated () {},
  methods: {
    /*********** 顶部 *************/
    // 返回
    rebackBtn(){
      this.$router.push('');
    },
    // 保存
    saveData(){
      console.log('111',this.waterfallList);
    },

    /*********** 左侧 *************/
    // 生成楼层Id
    getFloorIdNum() {
      return toHex(new Date().getTime()) + '0' + randNum4().toLocaleUpperCase();
    },
    // 创建楼层列表
    cloneDog(item){
      if(item.type == 'detailBox'){//影片详情
        item.default.detail = { 
          logo:require('@/assets/images/img-1.png'),
          video:require('@/assets/img/1.jpg'),
          title:'舍我其谁',
          score:'8.1',
          corporate:'天翼视讯传媒有限公司提供',
          year:'2021',
          are:'中国大陆',
          total:'41',
          director:'鞠觉亮',
          actor:'李兰迪，牛骏峰，韩玖诺',
          introduction:'（内容来源于华数）天才青年围棋手胜景初，黑马姿态一战成名，轰动围棋界。从不接受任何采访的他成为了众多媒体争相报道的对象。实习记者程了帮盛景初解围，却被误会为他的女朋友，两人假戏真做等候收到i的就哦啊收到都好都好是等哈收到都好都好的话大撒大撒大大飒飒大苏打大苏打大大是发售公告发布',
        };
        this.waterfallList.push({
          type: item.type,
          label: item.label,
          com: item.component,
          modularName: "",
          modularId: "",//楼层id
          style: {
            w: item.default.w,
            h: item.default.h,
            h0: item.default.h0,
          },
          detail: item.default.detail,
          isShow: item.default.isShow,
          value:item.default.value,
        })
      }
      else if(item.type == 'textposter'){//文字海报
        item.default.value = [{name:"", index: idx++, url:imgURL}]
        this.waterfallList.push({
          type: item.type,
          label: item.label,
          com: item.component,
          modularName: "",
          modularId: "",//楼层id
          style: {
            w: item.default.w,
            h: item.default.h,
            h0: item.default.h0,
          },
          detail: item.default.detail,
          isShow: item.default.isShow,
          value: item.default.value,
        })
      }
      else if(item.type == 'poster'){//普通海报
        item.default.value = [
          {name:"", index: idx++, url:imgURL},
        ]
        this.waterfallList.push({
          type: item.type,
          label: item.label,
          com: item.component,
          modularName: "",
          modularId: "",//楼层id
          style: {
            w: item.default.w,
            h: item.default.h,
            h0: item.default.h0,
          },
          detail: item.default.detail,
          isShow: item.default.isShow,
          value: item.default.value,
        })
      }
    },

    /*********** 中间 *************/
    // 取消默认选中
    defaultNull(){
      this.modelClass = null;
      this.comClass = null;
    },
    // 展示页面信息
    isShowInfo(){
      this.isDetailInfo = true;
      this.isFloorInfo = false;
      this.isMorebtn = false;
      this.isRight = false;
    },
    // 设置楼层信息
    selectType(item,index){
      this.propsData = item;
      console.log('小组件属性值',this.propsData);
      this.modelClass = index;//楼层选中样式
      this.comClass = null;//组件选中样式
      this.isDetailInfo = false;
      this.isRight = false;
      this.isFloorInfo = true;
      this.$nextTick(() => this.isFloorInfo = true);
    },
    // 影片信息添加推荐位
    AddItem(data){
      console.log('推荐位：',data);
      data.push({name:"", index: idx++});
    },
    // 添加海报位
    AddItemPoster(data){
      console.log('海报位：',data);
      data.push({name:"", index: idx++, url:imgURL})
    },
    // 配置组件
    getDetailRecomm(data,items){
      data[0].preventDefault();//阻止默认事件
      data[0].stopPropagation();//阻止事件冒泡
      console.log('推荐位数据：',data,items);
      this.comClass = data[3];//组件选中样式
      this.isDetailInfo = false;
      this.isFloorInfo = false;
      this.isRight = true;
      // 查询位置信息
      this.positionInfo = {
        name:'',
        siteId: this.getFloorIdNum()
      }
    },
    // 删除组件
    deleteRecommItem(data,items){
      data[0].preventDefault();//阻止默认事件
      data[0].stopPropagation();//阻止事件冒泡
      console.log('删除推荐位数据：',data,items);
      data[1].value.splice(data[3],1);
      this.comClass = null;//组件选中样式
      this.isDetailInfo = false;
      this.isRight = false;
      this.isFloorInfo = true;
    },
    // 删除楼层
    deleteFloorItem(items,index){
      if(items.id){
        this.waterfallList.splice(index,1);
      } else {
        this.isDetailInfo = true;
        this.isFloorInfo = false;
        this.isRight = false;
        this.waterfallList.splice(index,1);
      }
    },

    

    /*********** 右侧 *************/
    // 模板自定义截屏
    initScreenShort() {
      if(this.modelinfo.viewImg!=""){
        this.$message({message:'已上传模板截图，若要重新上传请先删除！',type:'error'});
      } else {
        const screenShotHandler = new ScreenShot({
          enableWebRtc: false, // 是否启用webrtc，值为boolean类型，值为false则使用html2canvas来截图
          completeCallback: this.callback, //确认的回调函数
          closeCallback: this.closeFn, // 截图关闭回调函数
          level: 11, //截图的层级
          loadCrossImg: true, //允许图片跨域
        });
      }
    },
    //截图确认按钮回调函数
    callback(base64data) {
      // 截图路径 base64
      // console.log('图片路径：',base64data);
      requestModel({img:base64data},'screenshot').then(res =>{
        let {result_code, result_msg, data} = res;
        if(result_code == 0){
          this.modelinfo.viewImg = data;
          this.$message({message:'截图成功',type:'success'});
        } else {
          this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
        }
      })
    },
    closeFn(e){
      console.log(e);
    },

  },
  filters: {},
}
</script>

<style lang="less" scoped>
.createPage {
  width: 100%;
  height: 100%;
  // 顶部按钮
  .topBtn{
    padding: 15px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  // 操作区域
  .template{
    width: 100%;
    height: calc(100vh - 155px);
    margin-top: 15px;
    padding: 15px;
    background-color: #FFFFFF;
    display: flex;
    // 左边小组件
    .left{
      width: 260px;
      height: 100%;
      overflow-y: auto;
      box-shadow: 0px 2px 8px 0px #ccc;
      .widgetList{
        width: 100%;
        height: 100%;
        margin-top: 10px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .modelItem{
          font-size: 14px;
          color: #666;
          padding: 5px;
          margin: 7px;
          border-radius: 6px;
          position: relative;
          cursor: move;
          .itemBox{
            width: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          }
          &:hover{
            border: 1px dashed #3089fd;
            color: #3089fd;
            background-color: #e5f0fe;
          }
        }
        .noModelList{
          width: 100%;
          text-align:center;
          margin-top:50px;
          color:#cdcdcd;
        }
      }
    }
    // 中间面板
    .center{
      width: calc(100% - 700px);
      height: 100%;
      margin: 0 20px;
      box-shadow: 0px 2px 8px 0px #ccc;
      position: relative;
      .navInfo{
        width: 100%;
        height: 42px;
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        transition: all .3s;
        padding: 10px 20px;
        border-bottom: 1px solid #cdcdcd;
        cursor: pointer;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .title{
          font-size: 16px;
        }
      }
      .panle{
        margin-top: 42px;
        height: calc(100% - 42px);
        background: linear-gradient(-90deg, rgba(82, 82, 82, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(82, 82, 82, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px;
        padding: 10px 15px;
        display: flex;
        justify-content: center;
        overflow-y: auto;
        overflow-x: hidden;
        .view{
          width: 860px;
          height: 100%;
          // 楼层
          .item{
            position: relative;
            margin-top: 10px;
            &:nth-child(1){
              margin-top: 0;
            }
            &:hover{
              width: 860px;
              transition: all .2s;
              transform: scale(0.99);
              border-radius: 2px;
              box-shadow: 0 0 3px #afafaf;
              background-color: rgba(229, 240, 254, 0.2);
              .el-icon-error{
                display: block;
              }
            }
            .el-icon-error{
              position: absolute;
              right: -10px;
              top: -6px;
              color: red;
              font-size: 25px;
              cursor: pointer;
              display: none;
              z-index: 9999;
            }
          }
        }
      }
      // 模板点击时的样式
      .border{
        border: 2px dashed blue !important;
      }
      .comBorder{
        border: 2px dashed red !important;
      }
      // 楼层删除时的样式
      .maskIndex{
        position: absolute;
        width: 100%;
        background-color: red;
        opacity: 0.4;
        z-index: 9;
      }
      .tips{
        position: absolute;
        width: 100%;
        color: red;
        font-size: 30px;
        z-index: 99;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        &:hover{
          .bgTip{
            background-color: #ffffff;
          }
        }
        .bgTip{
          padding: 0 5px;
          border-radius: 4px;
        }
      }
    }
    // 右边属性
    .right{
      width: 410px;
      height: 100%;
      overflow-y: auto;
      box-shadow: 0px 2px 8px 0px #ccc;
    }
  }
}
</style>